<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="width">
<title>婚礼请柬，邀您见证</title>
<link rel="stylesheet" href="http://mone.qiniudn.com/wedding/framework7.min.css">
<style type="text/css">
input,textarea{display:block;width:90%;margin:5px auto;padding:5px;border:none}
textarea{height:88px;resize:none}
input{line-height:22px;vertical-align:middle}
.slider-slide{position:relative;font-family:"Microsoft Yahei", 黑体}
.audio-bar,.ctrl-bar,.prev-slide,.next-slide{position: absolute;cursor: pointer;width: 100%;height: 32px;color: white;z-index: 9999}
.audio-bar{top:5px;background:transparent no-repeat right center url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="%23FFFFFF" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 30 32" style="enable-background:new 0 0 30 32;" xml:space="preserve"><g id="Music_x5F_Note"><g><path style="fill-rule:evenodd;clip-rule:evenodd;" d="M27,0C20.842,0,14.303,1.644,9.506,4.398C8.574,4.934,8,5.926,8,7v16.275C7.44,23.102,6.837,23,6.205,23c-0.741,0-1.513,0.125-2.274,0.39c-2.911,1.01-4.567,3.668-3.7,5.938C0.869,31.004,2.706,32,4.794,32c0.741,0,1.514-0.125,2.275-0.39c2.354-0.818,3.888-2.714,3.929-4.611L11,27V16.46l1.494-0.858C16.362,13.38,21.921,12,27,12v7.275C26.44,19.102,25.837,19,25.205,19c-0.741,0-1.513,0.125-2.274,0.39c-2.911,1.01-4.567,3.668-3.7,5.938C19.869,27.004,21.706,28,23.794,28c0.741,0,1.514-0.126,2.275-0.39c2.354-0.818,3.888-2.714,3.929-4.611L30,23V3C30,1.343,28.657,0,27,0z M7.892,27.339c-0.217,0.467-0.806,1.09-1.806,1.437C5.658,28.924,5.224,29,4.794,29c-0.96,0-1.623-0.381-1.761-0.742c-0.061-0.16-0.036-0.361,0.075-0.599c0.217-0.466,0.806-1.088,1.807-1.436C5.342,26.075,5.776,26,6.205,26c0.96,0,1.625,0.382,1.762,0.741C8.027,26.9,8.003,27.102,7.892,27.339z M26.892,23.339c-0.217,0.467-0.806,1.09-1.806,1.437C24.658,24.924,24.224,25,23.794,25c-0.96,0-1.623-0.381-1.761-0.742c-0.062-0.16-0.036-0.361,0.075-0.599c0.217-0.466,0.806-1.088,1.807-1.435C24.342,22.075,24.776,22,25.205,22c0.96,0,1.625,0.382,1.762,0.741C27.027,22.9,27.003,23.102,26.892,23.339z M27,9c-5.264,0-11.436,1.379-16,4V7c4.564-2.621,10.736-4,16-4V9z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>')}
.ctrl-bar{bottom:5px;height:45px}
.ctrl-bar .button{display:block;width:90%;margin:0 auto}
.prev-slide{top:5px;background:transparent no-repeat center url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="%23FFFFFF" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><g><path d="M5.022,7.817l2.996-2.651l2.996,2.651c0.196,0.196,0.516,0.196,0.711,0c0.198-0.196,0.198-0.514,0.002-0.711L8.381,4.147c-0.1-0.1-0.231-0.148-0.362-0.146C7.887,3.999,7.756,4.047,7.656,4.147L4.311,7.106c-0.196,0.196-0.196,0.515,0,0.711C4.507,8.013,4.826,8.013,5.022,7.817z"/><path d="M8.381,7.733c-0.1-0.1-0.231-0.148-0.362-0.146C7.887,7.585,7.756,7.633,7.656,7.733l-3.345,2.958c-0.196,0.197-0.196,0.516,0,0.711c0.196,0.197,0.515,0.197,0.711,0l2.996-2.649l2.996,2.649c0.196,0.197,0.516,0.197,0.711,0c0.196-0.195,0.196-0.514,0-0.711L8.381,7.733z"/></g></svg>')}
.next-slide{bottom:5px;background:transparent no-repeat center url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="%23FFFFFF" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><g><path d="M10.979,8.182l-2.997,2.65l-2.996-2.65c-0.196-0.196-0.515-0.196-0.711,0c-0.196,0.196-0.196,0.515,0,0.71l3.345,2.959c0.1,0.101,0.231,0.148,0.362,0.146C8.113,12,8.244,11.953,8.344,11.854l3.346-2.959c0.195-0.196,0.195-0.516,0-0.711C11.493,7.987,11.174,7.986,10.979,8.182z"/><path d="M7.619,8.266c0.1,0.1,0.231,0.148,0.362,0.146c0.131,0.002,0.263-0.046,0.362-0.146l3.345-2.959c0.199-0.196,0.199-0.514,0.002-0.711c-0.196-0.196-0.516-0.196-0.711,0l-2.997,2.65l-2.996-2.65C4.789,4.4,4.47,4.4,4.274,4.596c-0.196,0.196-0.196,0.515,0,0.711L7.619,8.266z"/></g></svg>')}
.slider-welcome{background:url('http://mone.qiniudn.com/wedding/bg001.jpg') no-repeat center;background-size:100%}
.slider-info{background:url('http://mone.qiniudn.com/wedding/bg002.jpg') no-repeat center;background-size:100%}
.slider-photo{background:url('http://mone.qiniudn.com/wedding/bg003.jpg') no-repeat center;background-size:100%}
.slider-invite{background:url('http://mone.qiniudn.com/wedding/bg004.jpg') no-repeat center;background-size:100%}
.popup-map{background:url('http://mone.qiniudn.com/wedding/map.jpg') no-repeat center;background-size:100%}
.popup-map p{text-align:right;padding:8px 20px}
.popup-map .close-popup{display:inline-block;text-align:center;color:#eee;background-color:#900;border-radius:50%;font-size:28px;width:28px;height:28px;line-height:28px;vertical-align:middle}
h1{position:absolute;bottom:66px;left:50%;width:280px;height:190px;margin-left:-140px;background:transparent no-repeat center url('http://mone.qiniudn.com/wedding/heart56.png')}
h1 span{display:block;text-align:center;color:#eee;font-size:28px;padding-top:36px;font-weight:normal}
h1 span span{padding-top:10px;font-size:20px;}
h1 span span i{font-style:normal;display:inline-block;padding:0 12px;background:transparent no-repeat center url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="%23990000" x="0px" y="0px" width="22px" height="22px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve"><path d="M43.509,10.374c-3.295,0-6.843,1.853-9.152,4.566c-1.882,2.21-2.839,2.21-4.719,0c-2.309-2.713-5.852-4.566-9.148-4.566c-8.362,0-13.348,6.377-13.348,14.742c0,3.433,1.371,6.771,3.538,9.411c1.841,2.243,5.776,4.91,8.098,6.649c3.302,2.476,7.63,5.88,10.559,9.605c1.794,2.282,3.526,2.282,5.319,0.002c2.931-3.728,7.261-7.134,10.565-9.609c2.323-1.739,6.257-4.404,8.098-6.648c2.166-2.642,3.539-5.978,3.539-9.41C56.858,16.751,51.867,10.374,43.509,10.374z"/></svg>')}
h2{position:absolute;bottom:50px;background-color:rgba(160,150,130,0.4);width:100%}
h2 p{font-size:18px;padding:0 5px;font-weight:normal;color:#321}
h3{padding:0px 8px}
h3 .col-50{padding:20px 0}
h3 img{width:100%}
h4{position:absolute;top:188px;background-color:rgba(160,150,130,0.4);width:100%}
h4 p{font-size:18px;padding:0 8px;font-weight:normal;color:white}
</style>
</head>
<body>
<div class="views">
  <div class="view view-main">
    <div class="pages">
      <div data-page="main" class="page">
        <div class="page-content">
          <div class="slider-container slider-init" data-speed="400" data-direction="vertical" data-nextButton=".next-slide" data-prevButton=".prev-slide">
            <div class="slider-wrapper">
              <div class="slider-slide slider-welcome">
                <h1><span>我 们 结 婚 了<span>潘培清<i>&nbsp;</i>郑一敏</span></span></h1>
                <div class="audio-bar">
                  <audio src="http://mone.qiniudn.com/wedding/heariam.mp3" autoplay="autoplay"></audio>
                </div>
                <div class="next-slide"></div>
              </div>
              <div class="slider-slide slider-info">
                <div class="prev-slide"></div>
                <h2>
                  <p>时间：2015年02月12日(周四) 11时00分</p>
                  <p>地点：永春县达埔镇达理村(达理小学附近)</p>
                  <p>电话：13318732596</p>
                </h2>
                <div class="next-slide"></div>
              </div>
              <div class="slider-slide slider-photo">
                <h3 class="row">
                  <div class="col-50">
                    <div><img alt="婚纱照" src="http://mone.qiniudn.com/wedding/photo104.jpg"></div>
                    <div><img alt="婚纱照" src="http://mone.qiniudn.com/wedding/photo107.jpg/thumb280"></div>
                    <div><img alt="婚纱照" src="http://mone.qiniudn.com/wedding/photo108.jpg/thumb280"></div>
                  </div>
                  <div class="col-50">
                    <div><img alt="婚纱照" src="http://mone.qiniudn.com/wedding/photo1010.jpg/thumb280"></div>
                    <div><img alt="婚纱照" src="http://mone.qiniudn.com/wedding/photo106.jpg/thumb280"></div>
                    <div><img alt="婚纱照" src="http://mone.qiniudn.com/wedding/photo105.jpg/thumb280"></div>
                  </div>
                </h3>
                <h4>
                  <p>幸福此刻，缘定今生，邀您同见证</p>
                </h4>
                <div class="prev-slide"></div>
                <div class="next-slide"></div>
              </div>
              <div class="slider-slide slider-invite">
                
                <div class="prev-slide"></div>
                <div class="ctrl-bar">
                  <div class="row">
                    <div class="col-50">
                      <a href="#" class="btn-wishes button button-big active color-red">添加祝福</a>
                    </div>
                    <div class="col-50">
                      <a href="#" class="btn-map button button-big active color-lightblue">查看地图</a>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="http://mone.qiniudn.com/wedding/framework7.min.js"></script>
<script src="http://mone.qiniudn.com/wedding/av-min.js"></script>
<script>
  var dateFMT = function(d) {
    return Template7.compile('{{year}}年{{month}}月{{date}}日 {{hour}}时{{min}}分')({
      year: d.getFullYear(),
      month:d.getMonth()+1,
      date: d.getDate(),
      hour: d.getHours(),
      min:  d.getMinutes()
    });
  };
  var viewHappiness = function() {
    var Happiness = AV.Object.extend('Happiness');
    var query = new AV.Query(Happiness);
    query.descending('updatedAt');
    query.find({
      success: function(results) {
        var items = '',
            itemTpl = $$('#hp-item').html();
        for(var i=0; i<results.length; i++) {
          var obj = results[i];
          items += Template7.compile(itemTpl)({
            name: obj.get('name'),
            content: obj.get('content'),
            date: dateFMT(obj.updatedAt)
          });
        }
        var tpl = '<div class="popup">'+
                    '<div class="list-block media-list">'+
                      '<ul>'+items+'</ul>'+
                    '</div>'+
                    '<div class="content-block"><a href="#" class="button button-big active color-red close-popup">返回</a></div>'+
                  '</div>';
        app.popup(tpl);
      }
    });
  };
  var app = new Framework7();
  var photoBrowser = app.photoBrowser({
    photos: [
      'http://mone.qiniudn.com/wedding/photo1010.jpg',
      'http://mone.qiniudn.com/wedding/photo104.jpg',
      'http://mone.qiniudn.com/wedding/photo105.jpg',
      'http://mone.qiniudn.com/wedding/photo106.jpg',
      'http://mone.qiniudn.com/wedding/photo107.jpg',
      'http://mone.qiniudn.com/wedding/photo108.jpg'
    ],
    theme: 'dark',
    backLinkText: '关闭',
    toolbar: false,
    loop: true
  });
  var $$ = Dom7;
  var mainView = app.addView('.view-main', {
    dynamicNavbar: true
  });
  
  var audioBar = $$('.audio-bar');

  audioBar.on('click', function(e){
    var audio = audioBar.find('audio')[0];
    if(audio.paused) {
      audio.play();
      return;
    }
    audio.pause();
  });

  $$('.slider-photo img').on('click', function(e) {
    photoBrowser.open();
  });

  $$('.btn-wishes').on('click', function(e) {
    var modal = app.modal({
      title: '祝福我们',
      text: '',
      afterText: '<p><input type="text" placeholder="名字"></p><p><textarea placeholder="祝福语"></textarea></p>',
      buttons: [{
        text: '查看祝福',
        onClick: viewHappiness
      }, {
        text: '发送',
        onClick: function() {
          var name = $$(modal).find('input[type=text]').val(),
              content = $$(modal).find('textarea').val();
          if(name.length>0 && content.length>0) {
            var Happiness = AV.Object.extend('Happiness');
            var hpp = new Happiness();
            hpp.set({name:name,content:content});
            hpp.save(null, {
              success: function(object) {viewHappiness();}
            });
          }
        }
      }]
    });
  });

  $$('.btn-map').on('click', function(e) {
    var tpl = '<div class="popup popup-map">'+
                '<p><a href="#" class="close-popup">×</a></p>'+
              '</div>';
    app.popup(tpl);
  });

  AV.$ = $$;
  AV.initialize("m4xg0bi1vhxov8wqhdcmoxdnj4ui4dp9dfv06hog251yv1a4",
        "qwg2oe2zt3zxba3j85n5hg5vu5v9w4cziqh4pn7zw5wkwjkx");
</script>
<script id="hp-item" type="text/template7">
  <li class="item-content">
    <div class="item-inner">
      <div class="item-title-row">
        <div class="item-title">{{name}}</div>
        <div class="item-after">{{date}}</div>
      </div>
      <div class="item-text">{{content}}</div>
    </div>
  </li>
</script>
</body>
</html>